<template>
	<view>
		<uni-popup ref="companyRef" @maskClick="closePopup">
			<view class="popup-bdf" :style="{ paddingTop: `${navHeight}px` }">
				<view class="item-content">
					<view
						class="flex-between warning-text mb20"
						v-if="isShowWarning"
					>
						<view>切换企业后，所有数据将变更为所选企业数据</view>
						<view
							><uni-icons
								type="closeempty"
								size="35rpx"
								color="#BEBEBE"
								@click="closeSwitch()"
							></uni-icons
						></view>
					</view>
					<view
						v-for="item in companyList"
						:key="item.tenantId"
						class="item"
						:class="
							selectedCompany.tenantId == item.tenantId
								? 'active'
								: ''
						"
						@tap="selectedItem(item)"
					>
						<view class="flex-between">
							<view>{{ item.tenantName }}</view>
							<view
								v-if="selectedCompany.tenantId == item.tenantId"
								><uni-icons
									type="checkmarkempty"
									size="50rpx"
									color="#5385FC"
								></uni-icons
							></view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	props: {
		companyList: {
			type: Array,
			default() {
				return []
			},
		},
		isShow: {
			type: Boolean,
			default: false,
		},
		selectedCompany: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			navHeight: 0,
			isShowWarning: true,
		}
	},
	mounted() {
		this.navHeight = uni.getStorageSync('navHeight')
	},
	methods: {
		selectedItem(val) {
			this.$emit('selectedItem', val)
		},
		closeSwitch() {
			this.isShowWarning = false
		},
		openPopup() {
			this.$refs.companyRef.open('top')
		},
		closePopup() {
			this.$refs.companyRef.close()
			this.$emit('close')
		},
	},
	watch: {
		isShow(val) {
			if (val) {
				this.openPopup()
			} else {
				this.closePopup()
			}
		},
	},
}
</script>

<style scoped lang="scss">
.popup-bdf {
	background: #fff;
	border-radius: 0 0 20rpx 20rpx;
}
.warning-text {
	border-radius: 10px 10px 10px 10px;
	background-color: rgba(64, 158, 255, 0.07);
	padding: 16rpx;
	color: #5385fc;
	font-size: 30rpx;
}
.item-content {
	border-top: 2rpx solid #ccc;
	padding: 20rpx;
	max-height: 600rpx;
	overflow-y: auto;
	.item {
		color: #101010;
		font-size: 34rpx;
		height: 90rpx;
		line-height: 90rpx;
		padding-right: 30rpx;
		padding-left: 20rpx;
	}
}
</style>
